<template>
  <el-dialog
    :visible="visible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :center="center"
    :before-close="beforeClose"
    :destroy-on-close="destroyOnClose"
    :show-close="showClose"
    :close-on-press-escape="closeOnPressEscape"
    :close-on-click-modal="closeOnClickModal"
    :custom-class="customClass"
    :lock-scroll="lockScroll"
    :append-to-body="appendToBody"
    :modal-append-to-body="modalAppendToBody"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <slot />
    <template slot="title">
      <slot name="title" />
    </template>
    <template slot="footer">
      <slot name="footer" />
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'MDialog'
})
export default class extends Vue {
  @Prop({ default: '温馨提示' }) private title?: string;
  @Prop({ default: '50%' }) private width?: string;
  @Prop({ default: '15vh' }) private top?: string;
  @Prop({ default: '' }) private customClass?: string;
  @Prop({ required: true }) private visible?: boolean;
  @Prop({ default: false }) private fullscreen?: boolean;
  @Prop({ default: true }) private modal?: boolean;
  @Prop({ default: true }) private modalAppendToBody?: boolean;
  @Prop({ default: true }) private appendToBody?: boolean;
  @Prop({ default: true }) private lockScroll?: boolean;
  @Prop({ default: true }) private closeOnClickModal?: boolean;
  @Prop({ default: true }) private closeOnPressEscape?: boolean;
  @Prop({ default: true }) private showClose?: boolean;
  @Prop({ default: false }) private center?: boolean;
  @Prop({ default: false }) private destroyOnClose?: boolean;

  beforeClose() {
    // 实现prop的双向绑定  父组件监听只能用@before-close（而不是:before-close）
    this.$emit('update:visible', false)
    this.$emit('beforeClose')
  }
  open() {
    this.$emit('open')
  }
  opened() {
    this.$emit('opened')
  }
  close() {
    this.$emit('close')
  }
  closed() {
    this.$emit('closed')
  }
}
</script>
